<template>
  <div class="dashboard-editor-container">
    <div class="top_panel">
      <el-row :gutter="12">
        <el-col :span="2">
          <span>当前课程数: {{total}}</span>
        </el-col>
        <el-col :span="6" :offset="14">
          <el-input v-model="query.room" 
                    clearable placeholder="课程名称" 
                    @clear="getPage"
                    @keyup.enter.native="handleFilter" />
        </el-col>
        <el-col :span="2">
          <el-button type="info" icon="el-icon-search" @click="handleFilter">查找</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- <hr /> -->
    <div class="lsit_content">
      <el-row :gutter="32">
        <el-col :xs="12" :sm="8" :lg="6" v-for="item in pageList" :key="item.rid">
          <room-item :machine="item"></room-item>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import RoomItem from './components/RoomItem'
import { fetchMachines, } from '@/api/machine'
import { mapGetters } from 'vuex'

export default {
  name: 'DashboardEditor',
  components: { RoomItem },
  data() {
    return {
      List:[],
      pageList: [],
      total: 0,
      query: {
        sid:null,
        room:undefined
      },
      
      dialogFormVisible: false,
    }
  },
  computed:{
    ...mapGetters([
      'uid',
      'role',
      'name',
    ])
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.query.sid = this.uid
      fetchMachines(this.query).then(response => {
        this.List = response.load.machineList
        this.total = response.load.total
        this.getPage()
      })
    },
    getPage(){
      this.pageList = this.List
    },
    handleFilter() {
      if(this.query.room){
        this.pageList = this.List.filter(v=>v.room.indexOf(this.query.room) >= 0)
      }else{
        this.getPage()
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 22px;
  // background-color: rgb(240, 242, 245);
  .top_panel{
    margin-bottom: 20px;
    
    span{
      color: darkblue;
    }
  }
  .lsit_content{
  }
}
</style>
